<template>
    <el-form label-position="left" status-icon :hide-required-asterisk="true"
             ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="account">
            <el-input size="large" clearable placeholder="请输入手机号或邮箱" v-model="form.account">
                <template #prefix>
                    <el-icon :size="23">
                        <User/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input size="large" type="password" show-password placeholder="请输入密码"
                      v-model="form.password">
                <template #prefix>
                    <el-icon :size="23">
                        <Lock/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item style="align-items: center" prop="verifyCode">
            <template #label>
                <img class="login-code" :src="urlKaptcha" alt="验证码"
                     ref="imgKaptcha" @click="changeKAP"/>
            </template>
            <el-input type="text" v-model="form.verifyCode" placeholder="验证码"/>
        </el-form-item>
        <el-form-item>
            <el-button style="width: 100%" size="large" type="success" @click="doLogin(formRef)">登录</el-button>
        </el-form-item>
        <div style="display: flex;justify-content: space-between;">
            <el-button link @click="$emit('update:tab','register')">注册账号</el-button>
            <el-button link>忘记密码</el-button>
        </div>
    </el-form>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {Lock, User} from "@element-plus/icons-vue";
import {useUserStore} from "@/stores/user";
const userStore = useUserStore()
import {useRouter} from "vue-router";
const router = useRouter()

import {getAccountApi,loginAPI} from "@/apis/account";

defineEmits(["update:tab"])

const form = reactive({
    account: '',
    password: '',
    verifyCode: ''
})

const account = {
    telephone: '',
    email:'',
    password: '',
    verifyCode: ''
}
const rules = {
    account: [
        {required: true, message: '账号不能为空', trigger: ['blur','change']},
        {
            validator: (rule, value,callback) => {
                if(/^1[3456789]\d{9}$/.test(value)){
                    account.email = ""
                    account.telephone = form.account
                    return callback()
                }
                if(/^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/.test(value)) {
                    account.telephone = ""
                    account.email = form.account
                    return callback()
                }
                    return callback("账号不合法")
            },
            trigger: ['blur','change']
        }
    ],
    password: [
        {required: true, message: '密码不能为空', trigger: ['blur','change']}
    ],
    verifyCode: [
        {required: true, message: '验证码不能为空', trigger: ['blur','change']},
    ]
}

const imgKaptcha = ref(null)
const urlKaptcha = "/api/common/kaptcha"
//更改验证码
function changeKAP() {
    imgKaptcha.value.src = `${urlKaptcha}?${Math.random()}`
}

const formRef = ref(null)
// 用户登录
const doLogin = formEL => {
    formEL.validate(async (valid) => {
        if (valid) {
            account.password = form.password
            account.verifyCode = form.verifyCode
            let res = await loginAPI(account);
            userStore.id = res.data.id
            userStore.token = res.data.USER_TOKEN
            res = await getAccountApi()
            userStore.account = res.data
            ElMessage({
                message: "登陆成功",
                type: 'success',
                offset: window.innerHeight / 2,
            })
            await router.replace(userStore.perPath)
        }
    })
}
</script>

<style scoped>
.login-code {
    cursor: pointer;
}
</style>